import React, {Component} from 'react'
import {StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native'
import actions from "../../../redux/action";
import {connect} from "react-redux";

class CourseTeacherComponent extends Component {
  componentDidMount() {
    const {fetchCourseTeachers} = this.props;
    let formData = '';
    let params = {
      studentId: '121',
    };
    for (let i in params){
      formData += encodeURIComponent(i) + '=' + encodeURIComponent(params[i]) + '&'
    }
    console.log(formData)
    fetchCourseTeachers(formData)
  }
  courseTeacher(data){
    let courseTeachers = [];
    if(data){
      courseTeachers = data;
    }
    console.log(courseTeachers)
    let courseTeacher = <View style={styles.courseTeacher}>
      <ScrollView
        style={styles.scrollViewStyle}
        horizontal={true} // 横向
        showsHorizontalScrollIndicator={false}  // 此属性为true的时候，显示一个水平方向的滚动条。
        >
        {courseTeachers.map((item, index) => {
          return (
            <View style={styles.courseTeacherItem} key={index}>
              <Image
                style={styles.courseTeacherImg}
                source={{uri: `http://${item.headImg}`}}
              />
              <Text style={styles.courseTeacherJob}>{item.jobTitle}</Text>
              <Text style={styles.courseTeacherName}>{item.teacherName}</Text>
            </View>
          )
        })}
      </ScrollView>
    </View>
    return courseTeacher;
  }
  render() {
    const {courseTeacher} = this.props;
    console.log(courseTeacher)
    return (
      this.courseTeacher(courseTeacher)
    )
  }
}

const mapStateToProps = state => ({
  courseTeacher: state.course.courseTeacher
});
const mapDispatchToProps = dispatch => ({
  fetchCourseTeachers: (params) => dispatch(actions.fetchCourseTeachers(params))
});
export default connect(mapStateToProps, mapDispatchToProps)(CourseTeacherComponent);

const styles = StyleSheet.create({
  courseTeacher: {
    flex: 1,
    flexDirection: 'row',  
    alignItems: 'center',
    justifyContent: 'space-between',
    borderRadius: 8,
    paddingTop: 24,
    paddingRight: 16,
    paddingBottom: 24,
    paddingLeft: 16,
    marginBottom: 20,
    backgroundColor: '#fff',
    shadowOffset: {width: 7, height: 7},
    shadowColor: '#FFF3F4',
    shadowOpacity: 0.5,
    shadowRadius: 3,
    elevation: 7
  },
  courseTeacherItem: {
    marginRight: 15,
    alignItems: 'center',
  },
  courseTeacherImg: {
    width: 50,
    height: 50,
    borderRadius: 25,
  },
  courseTeacherJob: {
    color: '#282828',
    fontSize: 14,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: ('normal', '400'),
    textAlign: 'center',
  },
  courseTeacherName: {
    color: '#9C9C9C',
    fontSize: 12,
    fontFamily: 'PingFangSC-Regular',
    fontWeight: ('normal', '400'),
    textAlign: 'center',
  },
})